// 引入常态化样式
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/common.css");
// 引入自己的样式
require("./rejister.css");
// 引入阿里矢量图
require("../../assets/fonts/iconfont.css");
//引入公共js
const dom = require("../../utils/dom.js");
//引入模块
const CaptchaMini = require("captcha-mini");
document.addEventListener("DOMContentLoaded", function () {
	const axios = require("axios");
	// 创建验证码;
	let captcha = new CaptchaMini();
	let codeInit = "";
	captcha.draw(dom.get("#captcha"), (r) => {
		codeInit = r.toLowerCase();
	});

	// 功能一、表单验证
	// 1.设置标杆
	let flag = {
		tel: false,
		password: false,
	};
	// 2.手机号验证
	dom.get("#tel").addEventListener("input", function () {
		let reg =
			/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
		if (reg.test(this.value)) {
			this.style.border = "2px solid #0a0";
			flag.tel = true;
		} else {
			this.style.border = "2px solid #f00";
			flag.tel = false;
		}
	});
	//3. 验证码验证
	dom.get("#code").addEventListener("input", function () {
		let code = dom.get("#code").value.toLowerCase();
		if (code === codeInit) {
			dom.get("#code").style.border = "2px solid #0a0";
			flag.password = true;
		} else {
			dom.get("#code").style.border = "2px solid #f00";
			flag.password = false;
		}
	});
	//4. 密码验证
	dom.get("#pwd").addEventListener("input", function () {
		let reg = /^[a-zA-Z]\w{5,17}$/; // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
		if (reg.test(this.value)) {
			this.style.border = "2px solid #0a0";
			flag.password = true;
		} else {
			this.style.border = "2px solid #f00";
			flag.password = false;
		}
	});

	// 5.验证再次输入密码的值是否等于输入密码的值
	dom.get("#repwd").addEventListener("input", function () {
		if (this.value === dom.get("#pwd").value) {
			this.style.border = "2px solid #0a0";
			flag.password = true;
		} else {
			this.style.border = "2px solid #f00";
			flag.password = false;
		}
	});
	// 给注册账号绑定事件

	dom.get("#btn").addEventListener("click", function () {
		for (let key in flag) {
			if (!flag[key]) {
				dom.get("#tel").style.border = "2px solid #f00";
				dom.get("#pwd").style.border = "2px solid #f00";
				dom.get("#repwd").style.border = "2px solid #f00";
				return false;
			}
		}
		// axios接口
		axios
			.post("http://fitness.h5.itsource.cn:3701/api/user/register", {
				account: dom.get("#tel").value,
				password: dom.get("#pwd").value,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					location.href = "login.html";
					alert("恭喜您，注册成功！");
				} else {
					alert("哦豁！注册失败，" + res.data.message);
				}
			});
	});
});
